<template>
  <div id="project">
    <div id="mainBox">
      <div id="boxTit">
        <span class="tit"> <i class="el-icon-edit-outline"/> {{ tits }}</span>
        <el-popover
          placement="top-start"
          width="200"
          trigger="hover"
        >
          <vue-editor
            v-model="helpArrays.PROJECT_DESC"
            :disabled="true"
            :editor-toolbar="customToolbar"
          />
          <i
            slot="reference"
            class="el-icon-question"
            style="color:#409eff;margin-left:5px;font-size:20px;"
          />
        </el-popover>
      </div>
      <el-form
        ref="form"
        :model="form"
        label-width="110px"
      >

        <el-form-item label="连接地址">
          <el-input
            v-model="form.dbUrl"
            @blur="onBlur()"
          />
          <span
            v-show="tit.dbUrl"
            class="errortitle"
          >地址不能为空</span>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input
            v-model="form.dbUser"
            @blur="onBlur()"
          />
          <span
            v-show="tit.dbUser"
            class="errortitle"
          >用户名不能为空</span>

        </el-form-item>
        <el-form-item label="密码">
          <el-input
            v-model="form.dbPassword"
            @blur="onBlur()"
          />
        </el-form-item>
        <el-form-item label="列名称映射规则">
          <el-select v-model="form.columnNamedRule">
            <el-option
              v-for="(item,key,index) in formtable.namedMappers"
              :key="index"
              :label="item"
              :value="key"
            />
          </el-select>

        </el-form-item>
        <el-form-item label="表名称映射规则">
          <el-select v-model="form.tableNamedRule">
            <el-option
              v-for="(item,key,index) in formtable.namedMappers"
              :key="index"
              :label="item"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="方言">
          <el-select
            v-model="form.dbDialect"
            @blur="onBlur()"
          >
            <el-option
              v-for="(item,key,index) in formtable.dialects"
              :key="index"
              :label="item"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <div
          v-show="tableInfos"
          class="modelbox"
        >
          <h2>选中不包含的表</h2>
          <el-checkbox-group v-model="excludeTableJson">
            <el-checkbox
              v-for="(item,index) in infos"
              :key="index"
              :label="item.tableName"
            />

          </el-checkbox-group>

          <!-- <el-checkbox
            v-for="(item,index) in infos"
            :key="index"
            :label="item.tableName"
            v-model="form.excludeTableJson"
            @change="checked=>changes(checked,item.tableName,index)"
          ></el-checkbox> -->

        </div>

        <el-form-item label="项目名称">
          <el-input v-model="form.projectName"/>
          <span
            v-show="tit.projectName"
            class="errortitle"
          >项目名称不能为空</span>
        </el-form-item>
        <el-form-item label="项目版本">
          <el-input v-model="form.projectVersion"/>
          <span
            v-show="tit.projectVersion"
            class="errortitle"
          >项目版本不能为空</span>
        </el-form-item>

        <el-form-item label="项目描述">
          <el-input
            v-model="form.projectDesc"
            type="textarea"
            autosize
          />
        </el-form-item>
        <el-form-item label="附加文件">
          <div>
            <div id="tit">
              <div><span>名称</span></div>
              <div><span>路径</span></div>
              <div class="pro"><span>文件</span></div>
              <div class="addbtn">
                <i
                  class="el-icon-circle-plus-outline"
                  @click="appends"
                />
              </div>
            </div>
            <div
              v-for="(item,index) in arrays"
              ref="arrays"
              :key="index"
              class="subjoin"
            >
              <div class="sub">
                <el-input v-model="item.name"/>
              </div>
              <div class="sub">
                <el-input v-model="item.classPath"/>
              </div>
              <div
                id="add"
                class="sub pro"
              >
                <div
                  v-if="item.filePath != '' "
                  class="btn"
                >
                  <el-popover
                    :content="item.filePath"
                    placement="top-start"
                    trigger="hover"
                  >
                    <i
                      slot="reference"
                      class="el-icon-circle-check"
                    />
                  </el-popover>
                </div>
                <div
                  v-else
                  class="btn"
                >
                  <i class="el-icon-circle-plus-outline"/>
                  <input
                    id="uploads"
                    ref="file"
                    type="file"
                    name=""
                    @change="upload(index)"
                  >
                </div>
                <div
                  class="closenBtn"
                  @click="closenBtn(index)"
                >
                  <i class="el-icon-circle-close"/>
                </div>
              </div>
              <div
                class="closenSubjoin"
                @click="closenSubjoin(index)"
              >
                <i class="el-icon-error"/>
              </div>
            </div>
          </div>
        </el-form-item>

      </el-form>
      <div id="proLine">
        <div
          class="main"
          @mousedown="mouseOn($event)"
          @mousemove="mouseMove($event)"
          @mouseup="mouseUp($event)"
          @touchstart="mouseOn($event)"
          @touchmove="mouseMove($event)"
          @touchend="mouseUp($event)"
        >

          <canvas
            id="canvas"
            ref="canvas"
            width="500"
            height="800"
          />
          <div
            ref="left"
            class="lineLeft"
          >
            <div
              v-for="(item,index) in customDataSources"
              :key="index"
              class="box"
            >
              {{ item.decrypt }}
            </div>

          </div>
          <!-- <el-select
            v-model="couponSelected"
            @change="changes()"
            placeholder="请选择"
          >
            <el-option
              v-for="items in coderTemps"
              :key="items.id"
              :label="items.name"
              :value="items.id"
            >
            </el-option>
          </el-select> -->
          <div
            ref="right"
            class="lineRight"
          >

            <div
              v-for="(item,index) in tcs"
              :key="index"
              class="box"
            >
              {{ item.type }}
            </div>

          </div>
          <div
            id="lines"
            ref="lines"
          />
        </div>
        <div class="temp">
          <el-form
            id="create"
            :label-position="labelPosition"
            label-width="100px"
          >
            <el-form-item label="样式模板">
              <el-select v-model="tempStyleId">
                <el-option
                  v-for="(item,index) in styleTemps"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="文件模板">
              <el-select
                v-model="tempCoderId"
                @change="changes()"
              >
                <el-option
                  v-for="(item,index) in coderTemps"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="代码管理组件">
              <el-select v-model="Manager">
                <el-option
                  v-for="(item,index) in coderManager"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                size="small"
                @click="globals()"
              >
                添加全局变量
              </el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="vars">
          <div
            v-for="(item,index) in global"
            :key="index"
          >
            <el-select
              v-model="item.var"
              placeholder="请选择"
              @change="param(item.var)"
            >
              <el-option
                v-for="item in variables"
                :key="item.decrypt"
                :label="item.varKey"
                :value="item.varKey"
                :disabled="item.disabled"
              />
            </el-select>
            <el-input v-model="item.value"/>
            <div
              class="closenSubjoin"
              @click="varsclosenSubjoin(index)"
            >
              <i class="el-icon-error"/>
            </div>
          </div>
        </div>
      </div>
      <div style="clear:both"/>
      <div class="btn">
        <el-button
          class="next"
          @click="onSubmit"
        >{{ tits }}</el-button>
        <el-button
          class="back"
          @click="onBack"
        >取消</el-button>
      </div>
    </div>
  </div>
</template>
<style>
#project .modelbox {
  width: 800px;
  margin-bottom: 20px;
}
#project .el-checkbox {
  width: 260px;
}
#project #mainBox #boxTit .tit i {
  margin-right: 10px;
}
#project #mainBox {
  margin-left: 15px;
  margin-top: 15px;
  width: 100%;
  border: 1px solid #623f18;
}
#project #mainBox #boxTit {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #623f18;
}
#project #mainBox #boxTit .tit {
  margin-left: 20px;
  font-size: 20px;
  color: #623f18;
  line-height: 40px;
}
#project #mainBox .btn {
  text-align: center;
  border-top: 1px solid #e5e5e5;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #f5f5f5;
}
#project #mainBox .btn .el-button {
  margin-right: 30px;
}
#project .el-form {
  margin-left: 50px;
  margin-top: 50px;
  margin-bottom: 50px;
  width: 45%;
  float: left;
}
#project .el-input {
  width: 350px;
}
#project .el-input__suffix {
  top: 1px;
}
#project .el-form-item__content {
  width: 100%;
}
#project .errortitle {
  color: red;
}
#project .next {
  background: #623f18;
  color: #fff;
}
#project .back {
  border-color: #623f18;
  color: #623f18;
}
#project .el-textarea {
  width: 350px;
}
#project .addbtn {
  font-size: 20px;
}
#project .addbtn i {
  cursor: pointer;
}
#project .subjoin {
  height: 40px;
  width: 500px;
}
#project .subjoin .el-input {
  width: 100px;
}
#project .sub {
  position: relative;
  float: left;
  width: 150px;
  height: 40px;
  border-bottom: 1px solid #ccc;
}
#project .sub .el-input__inner {
  height: 28px;
}

#project .sub .el-button--medium {
  padding: 3px 10px;
}
#project .sub .el-button {
  width: 100px;
  height: 28px;
}
#project #uploads {
  position: absolute;
  width: 30px;
  height: 36px;
  opacity: 0;
  left: 0;
  top: 0;
}
#project #tit {
  width: 590px;
  height: 30px;
  position: relative;
}
#project #tit div {
  width: 150px;
  height: 28px;
  line-height: 28px;
  float: left;
}
#project #tit div span {
  margin-left: 5px;
}
#project #tit .pro {
  width: 130px;
}
#project .subjoin .closenSubjoin {
  color: crimson;
  position: absolute;
  left: -30px;
  font-size: 20px;
}
#project #add .btn {
  position: relative;
  text-align: center;
  width: 30px;
  color: aqua;
  font-size: 20px;
  float: left;
  padding: 0px;
  background: none;
  border: none;
}
#project .closenBtn {
  color: cornflowerblue;
  text-align: center;
  width: 30px;
  font-size: 20px;
  float: left;
}
/* 连线 */

#project #proLine {
  width: 50%;
  margin-top: 50px;
  float: right;
  position: relative;
}
#project #proLine .el-input {
  width: 200px;
}
#project #proLine .box {
  width: 150px;
  height: 40px;
  border: 1px solid #ccc;
  margin-bottom: 15px;
  -webkit-user-select: none;
  text-align: center;
  padding-top: 12px;
}
#project #proLine .box p {
  margin-top: 10px;
  padding-left: 10px;
}
#project #proLine .lineLeft {
  width: 50%;
  height: 100%;
  float: left;
}

#project #proLine .lineRight {
  width: 50%;
  height: 100%;
  float: left;
  margin-top: 3px;
}
#project #proLine #canvas {
  position: absolute;
  left: 0;
  z-index: -1;
}
#project #proLine #lines {
  clear: both;
}
#project #proLine .lines {
  transform-origin: left top;
  border-radius: 5px;
  background: #0aa4dc;
  position: absolute;
}
#project #proLine .lines:hover {
  background-color: #d81e06;
  border-color: #8c8c8c;
  cursor: pointer;
}
#project #proLine .lines:hover .del {
  display: block;
}
#project #proLine .del {
  position: absolute;
  left: 45%;
  top: -8px;
  display: none;
  color: red;
  font-size: 20px;
}
/*文件和样式模板*/
#project .temp {
  height: 248px;
}
#project #create {
  margin: 0;
  width: 50%;
}
#project .vars div {
  margin-bottom: 5px;
}
#project .vars .closenSubjoin {
  color: crimson;
  font-size: 20px;
  float: left;
  margin-right: 5px;
}
</style>
<script>
import {
  newProject,
  projectDesc,
  docwindow,
  gconfigBasic,
  projectTables,
  descTcs
} from '@/api/page'
import { VueEditor } from 'vue2-editor'

export default {
  components: {
    VueEditor
  },
  data() {
    return {
      pid: '',
      addPro: '',
      tits: '',
      addBollern: '',
      form: {
        projectName: '',
        projectDesc: '',
        projectVersion: '',
        dbUrl: '',
        dbUser: '',
        dbPassword: '',
        columnNamedRule: '',
        tableNamedRule: '',
        dbDialect: ''
      },
      excludeTableJson: [],
      formtable: [],
      tit: {
        projectName: false,
        projectVersion: false,
        dbUrl: false,
        dbUser: false
      },
      tableInfos: false,
      list: [],
      arr: [],
      infos: [],
      customToolbar: [],
      helpArrays: [],
      arrays: [],
      // 连线
      mid_startx: '',
      mid_starty: '',
      mid_endx: '',
      mid_endy: '',
      context: '',
      over: true,
      customDataSources: [],
      couponSelected: '',
      coderTemps: [],
      tcs: [],
      gp: {},
      mid_gpl: '',
      mid_gpr: '',
      lineArr: [],
      // 样式和文件模板选择
      tempCoderId: '',
      tempStyleId: '',
      labelPosition: 'right',
      styleTemps: [],
      // 添加全局变量
      coderManager: [],
      Manager: '',
      variables: [],
      global: []
    }
  },
  mounted() {
    this.pid = localStorage.getItem('pid')
    this.addPro = localStorage.getItem('addPro')
    var obj = {}
    if (this.addPro == '') {
      this.tits = '创建项目'
      projectDesc(obj)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.formtable = response.data.data
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    } else {
      this.tits = '修改项目'
      this.tableInfos = true
      obj.pid = this.pid
      projectDesc(obj)
        .then(response => {
          if (response.data.code == 'SUCCESS') {
            this.formtable = response.data.data
            this.form = response.data.data.project
            this.excludeTableJson =
              response.data.data.project.projectDataStatuct.excludeTables
            this.customDataSources = response.data.data.customDataSources
            this.coderTemps = response.data.data.coderTemps
            this.styleTemps = response.data.data.styleTemps
            this.coderManager = response.data.data.coderManager
            // this.couponSelected =
            //   response.data.data.project.generatorConfig.tempCoderId;
            this.tempCoderId =
              response.data.data.project.generatorConfig.tempCoderId

            this.tempStyleId =
              response.data.data.project.generatorConfig.tempStyleId
            this.Manager = response.data.data.project.generatorConfig.codeType
            this.global = response.data.data.project.generatorConfig.vars
            this.variables = response.data.data.variables
            this.gp =
              response.data.data.project.generatorConfig.dataTemplateMapperIds
            for (const i in this.gp) {
              const o = {}
              o[i] = this.gp[i]
              this.lineArr.push(o)
            }
            localStorage.setItem('original', JSON.stringify(this.lineArr))
            this.changes()
            this.onBlur()
            if (
              response.data.data.project.projectDataStatuct.sources == undefined
            ) {
              this.arrays = []
            } else {
              this.arrays =
                response.data.data.project.projectDataStatuct.sources
            }
          } else {
            alert(response.data.message)
          }
        })
        .catch(error => {
          alert(error.response.data.message)
        })
    }

    this.arr = ['PROJECT_DESC']

    docwindow(this.arr)
      .then(response => {
        if (response.data.code == 'SUCCESS') {
          this.helpArrays = response.data.data
        } else {
          alert(response.data.message)
        }
      })
      .catch(error => {
        alert(error.response.data.message)
      })

    // 连线
    this.context = this.$refs.canvas.getContext('2d')
  },
  updated() {
    this.lins()
  },
  methods: {
    appends() {
      var arrObj = { name: '', classPath: '', pro: {}, filePath: '' }
      this.arrays.push(arrObj)
    },
    upload(index) {
      var event = window.event || arguments[0]
      var uplist = event.target.files
      for (var i = 0; i < this.arrays.length; i++) {
        this.arrays[index].pro = uplist[0]
        this.arrays[index].filePath = uplist[0].name
      }
    },
    closenSubjoin(index) {
      this.arrays.splice(index, 1)
    },
    varsclosenSubjoin(index) {
      this.global.splice(index, 1)
    },
    closenBtn(index) {
      this.arrays[index].filePath = ''
      this.arrays[index].pro = {}
    },
    changes() {
      var data = {}
      data.templateId = this.tempCoderId

      var original = JSON.parse(localStorage.getItem('original'))
      for (var i = 0; i < original.length; i++) {
        for (var key in original[i]) {
          if (this.gp[key] != original[i][key]) {
            this.gp[key] = original[i][key]
          }
        }
      }
      descTcs(data)
        .then(response => {
          this.tcs = response.data.data
          this.$nextTick(() => {
            for (var key in this.gp) {
              for (var i = 0; i < this.$refs.left.children.length; i++) {
                if (this.$refs.left.children[i].getAttribute('gpl') == key) {
                  var gplTop = this.$refs.left.children[i].getAttribute('top')
                  var gplLeft = this.$refs.left.children[i].getAttribute(
                    'left'
                  )
                  var gpl = this.$refs.left.children[i].getAttribute('gpl')
                }
              }
              for (var j = 0; j < this.$refs.right.children.length; j++) {
                if (
                  this.$refs.right.children[j].getAttribute('gpr') ==
                  this.gp[key]
                ) {
                  var gprTop = this.$refs.right.children[j].getAttribute('top')
                  var gprLeft = this.$refs.right.children[j].getAttribute(
                    'left'
                  )
                }
              }
              var lineOne = gprLeft - gplLeft
              var lineTwo = gprTop - gplTop
              var lineThree = Math.round(
                Math.sqrt(Math.pow(lineOne, 2) + Math.pow(lineTwo, 2))
              )
              const cos = lineTwo / lineThree
              const radina = Math.acos(cos)
              const angle = 90 - Math.floor(180 / (Math.PI / radina))
              const lineBox = document.createElement('div')
              const lineImg = document.createElement('span')

              lineBox.id = gpl
              lineBox.className = 'lines'
              lineBox.style =
                'width:' +
                lineThree +
                'px;height:' +
                2 +
                'px;left:' +
                gplLeft +
                'px; top:' +
                gplTop +
                'px;transform: rotate(' +
                angle +
                'deg) '
              lineImg.className = 'del el-icon-close'
              lineBox.appendChild(lineImg)

              this.$refs.lines.appendChild(lineBox)
            }
          })
        })
        .catch(error => {
          alert(error.response.data.message)
        })
      // 清除线
      for (var i = this.$refs.lines.childNodes.length - 1; i >= 0; i--) {
        this.$refs.lines.childNodes[i].remove()
      }
    },
    onBlur() {
      if (this.form.dbUrl && this.form.dbUser && this.form.dbDialect) {
        const obj = new Object()
        obj.dbUrl = this.form.dbUrl
        obj.dbUser = this.form.dbUser
        obj.dbPassword = this.form.dbPassword
        obj.dbDialect = this.form.dbDialect
        projectTables(obj).then(response => {
          this.infos = response.data.data
          this.tableInfos = true
        })
      } else {
        this.tableInfos = false
      }
    },
    onBack() {
      this.$router.go(-1)
    },
    req() {
      if (this.form.projectName == '') {
        this.$refs.form.$el.childNodes[14].childNodes[0].style.color = 'red'
        this.$refs.form.$el.childNodes[14].childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.projectName = true
      } else {
        this.$refs.form.$el.childNodes[14].childNodes[0].style.color =
          '#606266'
        this.$refs.form.$el.childNodes[14].childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.projectName = false
      }

      if (this.form.projectVersion == '') {
        this.$refs.form.$el.childNodes[16].childNodes[0].style.color = 'red'
        this.$refs.form.$el.childNodes[16].childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.projectVersion = true
      } else {
        this.$refs.form.$el.childNodes[16].childNodes[0].style.color =
          '#606266'
        this.$refs.form.$el.childNodes[16].childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.projectVersion = false
      }

      if (this.form.dbUrl == '') {
        this.$refs.form.$el.childNodes[0].childNodes[0].style.color = 'red'
        this.$refs.form.$el.childNodes[0].childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.dbUrl = true
      } else {
        this.$refs.form.$el.childNodes[0].childNodes[0].style.color = '#606266'
        this.$refs.form.$el.childNodes[0].childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.dbUrl = false
      }

      if (this.form.dbUser == '') {
        this.$refs.form.$el.childNodes[2].childNodes[0].style.color = 'red'
        this.$refs.form.$el.childNodes[2].childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          'red'
        this.tit.dbUser = true
      } else {
        this.$refs.form.$el.childNodes[2].childNodes[0].style.color = '#606266'
        this.$refs.form.$el.childNodes[2].childNodes[1].childNodes[0].childNodes[1].style.borderColor =
          '#c0c4cc'
        this.tit.dbUser = false
      }
    },
    onSubmit() {
      var _this = this
      _this.req()

      if (
        !this.tit.projectName &&
        !this.tit.projectVersion &&
        !this.tit.dbUrl &&
        !this.tit.dbUser
      ) {
        const postData = new FormData()
        const config = { headers: { 'Content-Type': 'multipart/form-data' }}

        if (_this.pid !== null) {
          postData.append('id', _this.pid)
        }
        postData.append('projectDesc', _this.form.projectDesc)
        postData.append('projectName', _this.form.projectName)
        postData.append('projectVersion', _this.form.projectVersion)

        // dburl   jdbc:mysql://localhost:3306/brick-generator?useUnicode=yes&characterEncoding=UTF8
        // dbuser   root
        // dbpass   yzg476

        postData.append('dbUrl', _this.form.dbUrl)
        postData.append('dbUser', _this.form.dbUser)
        postData.append('dbPassword', _this.form.dbPassword)
        postData.append('tableNamedRule', _this.form.tableNamedRule)
        postData.append('columnNamedRule', _this.form.columnNamedRule)
        postData.append('dbDialect', _this.form.dbDialect)
        postData.append(
          'excludeTableJson',
          JSON.stringify(_this.excludeTableJson)
        )
        var keyValue = {}
        function Post(PARAMS) {
          for (var i = 0; i < PARAMS.length; i++) {
            var obj = PARAMS[i]
            var key = Object.keys(obj)
            var value = obj[key]
            keyValue[key] = value
          }
        }
        Post(this.lineArr)
        console.log(keyValue)
        var generatorConfigJson = {}
        generatorConfigJson.dataTemplateMapperIds = keyValue
        generatorConfigJson.tempCoderId = this.tempCoderId
        generatorConfigJson.tempStyleId = this.tempStyleId
        generatorConfigJson.vars = this.global
        generatorConfigJson.codeType = this.Manager
        postData.append(
          'generatorConfigJson',
          JSON.stringify(generatorConfigJson)
        )
        console.log(generatorConfigJson)
        for (var i = 0; i < _this.arrays.length; i++) {
          if (this.arrays[i].pro == undefined) {
            postData.append(
              'projectDataStatuct.sources[' + i + '].filePath',
              this.arrays[i].filePath
            )
          } else {
            postData.append(
              'projectDataStatuct.sources[' + i + '].filePath',
              ''
            )
            if (this.arrays[i].filePath == '') {
              alert('请选择文件')
              return
            }
          }
          postData.append(
            'projectDataStatuct.sources[' + i + '].name',
            _this.arrays[i].name
          )
          postData.append(
            'projectDataStatuct.sources[' + i + '].classPath',
            _this.arrays[i].classPath
          )
          postData.append(i, this.arrays[i].pro)
        }

        newProject(postData, config)
          .then(response => {
            if (response.data.code == 'SUCCESS') {
              this.openFullScreen()
              setTimeout(() => {
                this.loading.close()
                this.$router.push('/admin')
                localStorage.setItem('pid', '')
              }, 1000)
            } else {
              alert(response.data.message)
            }
          })
          .catch(error => {
            alert(error.response.data.message)
          })
      }
    },
    openFullScreen() {
      this.loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    // 连线
    mouseOn(event) {
      if (event.path[1].className == 'lineLeft') {
        this.mid_startx = event.target.getAttribute('left')
        this.mid_starty = event.target.getAttribute('top')
        this.mid_gpl = event.target.getAttribute('gpl')
        this.over = false
      }
      if (event.path[1].className == 'lines') {
        // console.log(this.lineArr)
        // console.log(event.path[1])
        // for (var i = 0; i < this.$refs.lines.children.length; i++) {
        //   if (this.$refs.lines.children[i] == event.path[1]) {
        //     this.lineArr.splice(i, 1);
        //   }
        // }
        // event.path[1].remove();
        var arr = this.lineArr
        function is(type, obj) {
          var clas = Object.prototype.toString.call(obj).slice(8, -1)
          return obj !== undefined && obj !== null && clas === type
        }
        if (!is('Array', arr)) {
          this.lineArr = [this.lineArr]
        }
        this.lineArr.forEach((v, i) => {
          Object.keys(v).forEach(v => {
            if (v == event.path[1].getAttribute('id')) {
              console.log(v)// 取到了key
              console.log(event.path[1].getAttribute('id'))// 取到了key
              console.log(i)// 取到了key
              this.lineArr.splice(i, 1)
            }
          })
        })
        console.log(this.lineArr, 789)
        event.path[1].remove()
      }
    },
    mouseMove(event) {
      if (this.over == false) {
        var mid_endx = event.layerX
        var mid_endy = event.layerY
        this.context.clearRect(0, 0, 500, 800)
        this.context.beginPath()
        this.context.moveTo(this.mid_startx, this.mid_starty) // 设置起点状态
        this.context.lineTo(mid_endx, mid_endy) // 设置末端状态
        this.context.lineWidth = '2' // 设置线宽状态
        this.context.strokeStyle = '#0aa4dc' // 设置线的颜色状态
        this.context.stroke()
        this.context.restore()
      } else {
      }
    },
    mouseUp(event) {
      this.over = true
      if (event.path[1].className == 'lineRight') {
        this.context.clearRect(0, 0, 500, 800) // 整个画布清除
        this.mid_endx = event.target.getAttribute('left')
        this.mid_endy = event.target.getAttribute('top')
        this.mid_gpr = event.target.getAttribute('gpr')

        var isC = true
        if (this.mid_gpl != '') {
          // this.gp[this.mid_gpl] = this.mid_gpr;
          console.log(this.mid_gpl)
          console.log(this.mid_gpr)
          this.lineArr.forEach((c, i) => {
            Object.keys(c).forEach(v => {
              if (v == this.mid_gpl) {
                c[v] = this.mid_gpr
                isC = false
              }
            })
          })
          if (isC) {
            const keyValue = {}
            keyValue[this.mid_gpl] = this.mid_gpr
            this.lineArr.push(keyValue)
          }
        }
        console.log(this.lineArr)
        // this.lineArr =this.gp;
        var line1 = this.mid_endx - this.mid_startx
        var line2 = this.mid_endy - this.mid_starty
        var line3 = Math.round(
          Math.sqrt(Math.pow(line1, 2) + Math.pow(line2, 2))
        )
        var cos = line2 / line3
        var radina = Math.acos(cos)
        var angle = 90 - Math.floor(180 / (Math.PI / radina))

        var lineBox = document.createElement('div')
        var lineImg = document.createElement('span')

        lineBox.id = this.mid_gpl
        lineBox.className = 'lines'
        lineBox.style =
          'width:' +
          line3 +
          'px;height:' +
          2 +
          'px;left:' +
          this.mid_startx +
          'px; top:' +
          this.mid_starty +
          'px;transform: rotate(' +
          angle +
          'deg) '
        lineImg.className = 'del el-icon-close'
        lineBox.appendChild(lineImg)

        var mid_gpl = document.getElementsByClassName('lines')
        for (var i = 0; i < mid_gpl.length; i++) {
          if (mid_gpl[i].id == this.mid_gpl) {
            mid_gpl[i].remove()
          }
        }

        this.$refs.lines.appendChild(lineBox)

        this.mid_gpl = ''
        this.mid_gpr = ''
      } else {
        this.context.clearRect(0, 0, 500, 800) // 整个画布清除
      }
    },
    lins() {
      for (var i = 0; i < this.$refs.left.children.length; i++) {
        var leftLeft = this.$refs.left.children[i].offsetLeft
        var leftTop = this.$refs.left.children[i].offsetTop
        var leftWidth = this.$refs.left.children[i].offsetWidth
        var leftHeight = this.$refs.left.children[i].clientHeight
        this.$refs.left.children[i].setAttribute(
          'gpl',
          this.customDataSources[i].id
        )
        this.$refs.left.children[i].setAttribute('left', leftLeft + leftWidth)
        this.$refs.left.children[i].setAttribute(
          'top',
          leftTop + leftHeight / 2
        )
      }
      for (var i = 0; i < this.$refs.right.children.length; i++) {
        var rightLeft = this.$refs.right.children[i].offsetLeft
        var rightTop = this.$refs.right.children[i].offsetTop
        var rightWidth = this.$refs.right.children[i].offsetWidth
        var rightHeight = this.$refs.right.children[i].offsetHeight
        this.$refs.right.children[i].setAttribute('gpr', this.tcs[i].id)
        this.$refs.right.children[i].setAttribute('left', rightLeft)
        this.$refs.right.children[i].setAttribute(
          'top',
          rightTop + rightHeight / 2
        )
      }
    },
    // 添加全局变量
    globals() {
      var data = {}
      this.global.push(data)
    },
    param(index) {
      for (var i = 0; i < this.variables.length; i++) {
        if (this.variables[i].varKey == index) {
          this.variables[i].disabled = true
        } else {
          this.variables[i].disabled = false
        }
      }
    }
  }
}
</script>
